<template>
  <div class="login-code">
    <header class="code-header" @click="goBack()">返回</header>
    <div class="login-content">
      <h3>小米账号登录</h3>
      <!-- 用户邮箱登录 -->
      <div class="login-comfirm">
        <p>验证码已发送 +86 {{ phone }}</p>
        <button @click="goBack()">修改</button>
      </div>
      <div class="login-user">
        <div class="login-form">
          <div class="login-tel">
            <input
              type="tel"
              placeholder="请输入短信验证码"
              v-model="userCode"
            />
            <button class="time" :disabled="disabled" @click="sendCode">
              {{ codeMsg }}
            </button>
          </div>
          <div class="login-info">
            <button @click="goLogin">登录</button>
          </div>
        </div>
        <div class="login-text">
          <span @click="userLogin">用户名密码登录</span> |
          <span>收不到验证码?</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Toast } from 'mint-ui'
import http from '@/serveies/api/request'
export default {
  name: 'LoginCode',
  data () {
    return {
      disabled: false,
      codeNum: 6,
      codeMsg: '重新发送',
      phone: '',
      // 后端返回
      getCode: '',
      // 用户输入
      userCode: ''
    }
  },
  created () {
    this.phone = this.$route.query.tel
    this.sendCode()
  },
  methods: {
    ...mapMutations(['login']),
    userLogin () {
      this.$router.push('/login')
    },
    goBack () {
      this.$router.back()
    },
    sendCode () {
      // 请求短信验证码
      http
        .$axios({
          url: '/api/loginCode',
          method: 'POST',
          data: {
            phone: this.phone
          }
        })
        .then((res) => {
          console.log(res)
          this.getCode = res.data
        })
      this.disabled = true
      this.timer = setInterval(() => {
        --this.codeNum
        this.codeMsg = `重新发送${this.codeNum}`
      }, 1000)
      setTimeout(() => {
        clearInterval(this.timer)
        this.codeNum = 6
        this.disabled = false
        this.codeMsg = '重新发送'
      }, 6000)
    },
    goLogin () {
      if (this.getCode === Number(this.userCode)) {
        // 登录成功
        // 发送请求
        http
          .$axios({
            url: '/api/addUser',
            method: 'POST',
            data: {
              phone: this.phone
            }
          })
          .then((res) => {
            Toast(res.msg)
            // // 登录成功 跳转页面 存储信息
            this.login(res.data[0])
            this.$router.push('/my')
            console.log(res)
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-code {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.code-header {
  width: 100%;
  padding-left: 0.533333rem;
  padding-top: 0.266667rem;
  font-size: 0.48rem;
  color: #666;
}
.login-content {
  width: 100%;
  margin: 0.533333rem;
  h3 {
    font-size: 0.533333rem;
    padding-bottom: 0.533333rem;
  }
  .login-comfirm {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.373333rem;
    margin-bottom: 0.533333rem;
    color: #999;
    button {
      background-color: #fff;
      border: none;
      color: rgba(11, 132, 255, 0.9);
    }
  }
  .login-form {
    font-size: 0.48rem;
    .login-tel {
      position: relative;
      input {
        width: 78%;
        padding: 0 0.533333rem;
        height: 1.333333rem;
        border-radius: 0.4rem;
        margin-bottom: 0.533333rem;
        background-color: #eee;
        border: 1px solid #eee;
      }
      .time {
        position: absolute;
        right: 70px;
        top: 15px;
        border: none;
        color: rgba(11, 132, 255, 0.9);
      }
    }
    .login-info {
      button {
        width: 90%;
        height: 1.2rem;
        border-radius: 0.533333rem;
        border: 1px solid #eee;
        background-color: rgba(11, 132, 255, 0.6);
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
  .login-text {
    width: 100%;
    margin-left: -0.693333rem;
    font-size: 0.32rem;
    text-align: center;
    margin-top: 0.533333rem;
    color: #666;
  }
}
</style>
